<template>
    <div>
        <el-card class="box-card">
            <el-form :inline="true" ref="seachFormData" :model="seachFormData" class="demo-form-inline" size="mini">
                <el-form-item label="分类名称:">
                    <el-input v-model="seachFormData.title" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="seachFormData.status" placeholder="状态" style="width: 80px" clearable>
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="seachSubject">查询</el-button>
                    <el-button type="success" icon="el-icon-refresh" size="mini" @click="resetSubject">重置</el-button>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addSubject">添加</el-button>
                </el-form-item>

            </el-form>

            <el-divider></el-divider>

            <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    :default-expand-all=false
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="分类名称"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                :active-value="0"
                                :inactive-value="1"
                                active-color="#ff4949"
                                inactive-color="#13ce66"
                                active-text="禁用"
                                inactive-text="正常"
                                @change="changeSwitch(scope.row)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序"
                        align="center"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="bz"
                        align="center"
                        label="备注">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-circle-plus-outline"
                                size="mini"
                                type="primary"
                                @click="addSubject(scope.row)">添加</el-button>
                        <el-button
                                size="mini"
                                type="success"
                                @click="editSubject(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    :title="editSubjectFormData.title+'----修改'"
                    :visible.sync="editDialogVisible"
                    width="40%"
                    @closed="closeEditDialog"
            >
                <!--表单的数据绑定-->
                <el-form :model="editSubjectFormData" ref="editSubjectFormData"  label-width="70px" class="demo-ruleForm">
                    <el-form-item label="分类名称:" prop="mobile" label-width="100px" >
                        <el-input  type="text" v-model="editSubjectFormData.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="排序:" prop="sort" label-width="100px">
                        <el-input-number v-model="editSubjectFormData.sort"  :min="0" :max="100" label="排序"></el-input-number>
                    </el-form-item>
                    <el-form-item label="备注:" prop="description" label-width="100px">
                        <el-input type="textarea" v-model="editSubjectFormData.bz" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="quxiao">取 消</el-button>
                <el-button type="primary" @click="queren" >确定</el-button>
            </span>
            </el-dialog>

            <el-dialog
                    title="添加"
                    :visible.sync="addDialogVisible"
                    width="40%"
                    @closed="closeAddDialog"
            >
                <!--表单的数据绑定-->
                <el-form :model="addSubjectFormData" ref="addSubjectFormData"  label-width="70px" class="demo-ruleForm">
                    <el-form-item label="分类名称:" prop="mobile" label-width="100px" >
                        <el-input  type="text" v-model="addSubjectFormData.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:" prop="description" label-width="100px">
                        <el-input type="textarea" v-model="addSubjectFormData.bz" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="addQuxiao">取 消</el-button>
                <el-button type="primary" @click="addQueren" >确定</el-button>
            </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "fenleiguanli",
        data(){
            return{
                addDialogVisible:false,
                editDialogVisible:false,
                addSubjectFormData:{},
                editSubjectFormData:{},
                seachFormData:{},
                subjectFormData:{},
                tableData: [],

            }
        },
        created() {
            this.init();
        },
        methods:{
            closeEditDialog(){
                this.$refs.editSubjectFormData.resetFields();
                this.init();
            },
            closeAddDialog(){
                this.$refs.addSubjectFormData.resetFields();
                this.init();
            },
            addQuxiao(){
                this.addDialogVisible=false;
            },
            addQueren(){
                var that=this;
                this.$http.post(`core/subject/addSubject`,this.addSubjectFormData).then(function (resp) {
                    that.addDialogVisible=false;
                })
            },

            quxiao(){
                this.editDialogVisible=false;
            },
            queren(){
                var that=this;
                this.$http.post(`core/subject/updateSubject`,this.editSubjectFormData).then(function (resp) {
                    that.editDialogVisible=false;
                })
            },

            seachSubject(){
                var that=this;
                this.$http.post(`core/subject/seachSubjects`,this.seachFormData).then(function (resp) {
                    that.tableData=resp.data.result;
                })
            },
            resetSubject(){
                this.seachFormData={};
            },

            addSubject(){
                this.addDialogVisible=true;
            },
            editSubject(row){
                this.editDialogVisible=true;
                this.editSubjectFormData=row;
            },

            changeSwitch(row){
                var that=this;
                this.$http.post(`core/subject/changeStatus`,row).then(function (resp) {
                    that.init();
                })
            },
            init(){
                var that=this;
                this.$http.post(`core/subject/getSubjects`).then(function (resp) {
                    that.tableData=resp.data.result;
                })
            }
        }
    }
</script>

<style scoped>

</style>